<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xFio - {{.title}}</title>
    <link href="/static/vendor/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css">
    <link href="/static/vendor/fontawesome/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-header">
            <h3><span class="brand-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" role="img" focusable="false" class="xfio-logo-svg">
                    <circle cx="12" cy="12" r="11" class="disk" />
                    <path d="M13.5 2L6 14h5.2L10.5 22 18 10h-5.2L13.5 2z" class="bolt" />
                </svg>
            </span><span class="brand-word">x<span class="brand-f">F</span>io</span></h3>
            <p>分布式fio性能测试控制中心</p>
        </div>
        <div class="sidebar-nav">
            <nav class="nav flex-column">
                <a class="nav-link" href="/"><i class="fas fa-home"></i> 首页</a>
                <a class="nav-link" href="/workers"><i class="fas fa-server"></i> 节点管理</a>
                <a class="nav-link active" href="/test-cases"><i class="fas fa-file-code"></i> 测试用例</a>
                <a class="nav-link" href="/tasks"><i class="fas fa-tasks"></i> 任务管理</a>
                <a class="nav-link" href="/results"><i class="fas fa-chart-bar"></i> 结果分析</a>
            </nav>
        </div>
    </div>

    <div class="main-content">
        <div class="page-header">
            <h2><i class="fas fa-database me-2"></i> {{.title}}</h2>
        </div>

        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card text-center bg-primary text-white">
                    <div class="card-body">
                        <h5 id="totalTestCases">0</h5>
                        <p class="mb-0">测试用例数</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center bg-success text-white">
                    <div class="card-body">
                        <h5 id="recentlyCreated">0</h5>
                        <p class="mb-0">最近创建</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card text-center bg-info text-white">
                    <div class="card-body">
                        <h5 id="assignedTasks">0</h5>
                        <p class="mb-0">已创建任务</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end mb-2">
            <div class="d-flex gap-2">
                <button class="btn btn-outline-danger btn-sm" id="batchDeleteBtn" title="批量删除" disabled>
                    <i class="fas fa-trash me-1"></i> 批量删除
                </button>
                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addTestCaseModal">
                    <i class="fas fa-plus me-1"></i> 添加测试用例
                </button>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="testCasesTable">
                        <thead class="table-dark">
                            <tr>
                                <th><input type="checkbox" id="selectAll" title="全选"></th>
                                <th>名称</th>
                                <th>ID</th>
                                <th>描述</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 测试用例数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加测试用例模态框 -->
    <div class="modal fade" id="addTestCaseModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="fas fa-plus-circle me-2"></i>创建测试用例</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="testCaseForm">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="mb-3 text-center">
                                    <h5 class="text-primary mb-0">FIO测试配置</h5>
                                    <p class="text-muted small mb-0">配置您的FIO测试参数</p>
                                </div>
                                
                                <!-- 基本信息 -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0 text-primary"><i class="fas fa-info-circle me-2"></i>基本信息</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-3">
                                            <div class="col-md-6">
                                                <label for="testCaseName" class="form-label fw-semibold mb-1">用例名称 <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control form-control-sm" id="testCaseName" placeholder="输入测试用例名称" required maxlength="100">
                                            </div>
                                            <div class="col-md-6">
                                                <label for="fioName" class="form-label fw-semibold mb-1">FIO任务名称</label>
                                                <input type="text" class="form-control form-control-sm" id="fioName" placeholder="输入FIO任务名称">
                                            </div>
                                            <div class="col-12">
                                                <label for="testCaseDesc" class="form-label fw-semibold mb-1">描述</label>
                                                <textarea class="form-control form-control-sm" id="testCaseDesc" rows="2" placeholder="输入测试用例的详细描述"></textarea>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 基本参数 -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0 text-primary"><i class="fas fa-sliders-h me-2"></i>基本参数</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-2">
                                            <div class="col-md-3">
                                                <label for="rwType" class="form-label fw-semibold mb-1">读写模式 <span class="text-danger">*</span></label>
                                                <select class="form-select form-select-sm" id="rwType" required>
                                                    <option value="">选择读写模式</option>
                                                    <option value="read">顺序读 (read)</option>
                                                    <option value="write">顺序写 (write)</option>
                                                    <option value="randread">随机读 (randread)</option>
                                                    <option value="randwrite">随机写 (randwrite)</option>
                                                    <option value="rw">顺序读写混合 (rw)</option>
                                                    <option value="randrw">随机读写混合 (randrw)</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3" id="rwmixreadGroup" style="display: none;">
                                                <label for="rwmixread" class="form-label fw-semibold mb-1">读比例 (%)</label>
                                                <input type="number" class="form-control form-control-sm" id="rwmixread" min="1" max="100" value="50" placeholder="读比例">
                                            </div>
                                            <div class="col-md-3">
                                                <label for="blockSize" class="form-label fw-semibold mb-1">块大小 <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control form-control-sm" id="blockSize" value="4k" placeholder="4k" required>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="fileSize" class="form-label fw-semibold mb-1">文件大小 <span class="text-danger">*</span></label>
                                                <input type="text" class="form-control form-control-sm" id="fileSize" value="1G" placeholder="1G" required>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="numjobs" class="form-label fw-semibold mb-1">并发作业数 <span class="text-danger">*</span></label>
                                                <input type="number" class="form-control form-control-sm" id="numjobs" min="1" max="128" value="8" placeholder="作业数">
                                            </div>
                                            <div class="col-md-3">
                                                <label for="runtime" class="form-label fw-semibold mb-1">运行时间(秒) <span class="text-danger">*</span></label>
                                                <input type="number" class="form-control form-control-sm" id="runtime" min="1" value="60" placeholder="秒">
                                            </div>
                                            <div class="col-md-3">
                                                <label for="ioengine" class="form-label fw-semibold mb-1">I/O引擎 <span class="text-danger">*</span></label>
                                                <select class="form-select form-select-sm" id="ioengine" required>
                                                    <option value="libaio">libaio (Linux异步I/O)</option>
                                                    <option value="sync">sync (同步I/O)</option>
                                                    <option value="psync">psync (POSIX同步I/O)</option>
                                                    <option value="pvsync">pvsync (POSIX向量同步I/O)</option>
                                                    <option value="null">null (不执行实际I/O)</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="iodepth" class="form-label fw-semibold mb-1">I/O深度</label>
                                                <input type="number" class="form-control form-control-sm" id="iodepth" min="1" value="32" placeholder="深度">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 高级参数 -->
                                <div class="card mb-4">
                                    <div class="card-header bg-light">
                                        <h6 class="mb-0 text-primary"><i class="fas fa-tools me-2"></i>高级参数</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row g-2">
                                            <div class="col-md-3">
                                                <label for="direct" class="form-label fw-semibold mb-1">直接I/O</label>
                                                <select class="form-select form-select-sm" id="direct">
                                                    <option value="1" selected>启用 (绕过系统缓存)</option>
                                                    <option value="0">禁用 (使用系统缓存)</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="time_based" class="form-label fw-semibold mb-1">基于时间</label>
                                                <select class="form-select form-select-sm" id="time_based">
                                                    <option value="1" selected>启用 (按时间运行)</option>
                                                    <option value="0">禁用 (按大小运行)</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="verify" class="form-label fw-semibold mb-1">数据校验</label>
                                                <select class="form-select form-select-sm" id="verify">
                                                    <option value="" selected>无校验</option>
                                                    <option value="crc32">CRC32</option>
                                                    <option value="md5">MD5</option>
                                                    <option value="meta">元数据</option>
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <label for="end_fsync" class="form-label fw-semibold mb-1">结束时同步</label>
                                                <select class="form-select form-select-sm" id="end_fsync">
                                                    <option value="0" selected>无</option>
                                                    <option value="1">启用</option>
                                                </select>
                                            </div>
                                            <div class="col-12">
                                                <label for="filename" class="form-label fw-semibold mb-1">测试文件路径</label>
                                                <input type="text" class="form-control form-control-sm" id="filename" value="/tmp/fiotest" placeholder="文件路径">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>取消
                    </button>
                    <button type="button" class="btn btn-primary" id="saveTestCaseBtn">
                        <i class="fas fa-check me-1"></i>创建测试用例
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- FIO配置预览模态框 -->
    <div class="modal fade" id="configPreviewModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="fas fa-file-code me-2"></i>FIO配置详情</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <pre id="configPreviewContent" class="bg-light p-3 rounded" style="max-height: 400px; overflow-y: auto; font-size: 0.9em;">配置内容将在这里显示</pre>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer bg-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="mb-0">&copy; 2025 xfio - 分布式fio性能测试系统</p>
                </div>
            </div>
        </div>
    </footer>

    <style>
        /* 步骤向导样式 */
        .step {
            display: none;
        }
        
        .step.active {
            display: block;
        }
        
        /* 步骤指示器样式 */
        .step-indicator {
            margin-bottom: 2rem;
        }
        
        .step-item {
            z-index: 2;
            padding: 0 10px;
        }
        
        .step-item:not(:last-child)::after {
            content: "";
            position: absolute;
            top: 16px;
            left: calc(50% + 30px);
            right: -30px;
            height: 2px;
            background: #dee2e6;
            z-index: -1;
        }
        
        .step-item.active .step-number,
        .step-item:nth-child(-n+2) .step-number {
            background: #0d6efd;
            color: white;
        }
        
        .step-text {
            font-size: 12px;
            color: #6c757d;
        }
        
        .step-item.active .step-text,
        .step-item:nth-child(-n+2) .step-text {
            color: #0d6efd;
            font-weight: 500;
        }
        
        .form-control, .form-select {
            border-radius: 0.375rem;
            padding: 0.5rem 0.75rem;
        }
        
        .card {
            border: 1px solid #e9ecef;
            border-radius: 0.5rem;
        }
        
        .card-header {
            border-bottom: 1px solid #e9ecef;
            border-radius: 0.5rem 0.5rem 0 0 !important;
        }
        
        .info-label {
            font-weight: 500;
            color: #495057;
        }
        
        .info-value {
            font-weight: 400;
        }
        
        .modal-body {
            padding: 1.5rem;
        }
    </style>
    
    <!-- 编辑测试用例模态框 -->
    <div class="modal fade" id="editTestCaseModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="fas fa-edit me-2"></i>编辑测试用例</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="editTestCaseForm">
                        <input type="hidden" id="editTestCaseId">
                        
                        <div class="mb-3 text-center">
                            <h5 class="text-primary mb-0">编辑FIO测试配置</h5>
                            <p class="text-muted small mb-0">修改您的FIO测试参数</p>
                        </div>
                        
                        <!-- 基本信息 -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0 text-primary"><i class="fas fa-info-circle me-2"></i>基本信息</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <label for="editTestCaseName" class="form-label fw-semibold mb-1">用例名称 <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm" id="editTestCaseName" placeholder="输入测试用例名称" required maxlength="100">
                                    </div>
                                    <div class="col-md-6">
                                        <label for="editFioName" class="form-label fw-semibold mb-1">FIO任务名称</label>
                                        <input type="text" class="form-control form-control-sm" id="editFioName" placeholder="输入FIO任务名称">
                                    </div>
                                    <div class="col-12">
                                        <label for="editTestCaseDesc" class="form-label fw-semibold mb-1">描述</label>
                                        <textarea class="form-control form-control-sm" id="editTestCaseDesc" rows="2" placeholder="输入测试用例的详细描述"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 基本参数 -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0 text-primary"><i class="fas fa-sliders-h me-2"></i>基本参数</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-2">
                                    <div class="col-md-3">
                                        <label for="editRwType" class="form-label fw-semibold mb-1">读写模式 <span class="text-danger">*</span></label>
                                        <select class="form-select form-select-sm" id="editRwType" required>
                                            <option value="">选择读写模式</option>
                                            <option value="read">顺序读 (read)</option>
                                            <option value="write">顺序写 (write)</option>
                                            <option value="randread">随机读 (randread)</option>
                                            <option value="randwrite">随机写 (randwrite)</option>
                                            <option value="rw">顺序读写混合 (rw)</option>
                                            <option value="randrw">随机读写混合 (randrw)</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3" id="editRwmixreadGroup" style="display: none;">
                                        <label for="editRwmixread" class="form-label fw-semibold mb-1">读比例 (%)</label>
                                        <input type="number" class="form-control form-control-sm" id="editRwmixread" min="1" max="100" value="50" placeholder="读比例">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="editBlockSize" class="form-label fw-semibold mb-1">块大小 <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm" id="editBlockSize" value="4k" placeholder="4k" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="editFileSize" class="form-label fw-semibold mb-1">文件大小 <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control form-control-sm" id="editFileSize" value="1G" placeholder="1G" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="editNumjobs" class="form-label fw-semibold mb-1">并发作业数 <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control form-control-sm" id="editNumjobs" min="1" max="128" value="8" placeholder="作业数">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="editRuntime" class="form-label fw-semibold mb-1">运行时间(秒) <span class="text-danger">*</span></label>
                                        <input type="number" class="form-control form-control-sm" id="editRuntime" min="1" value="60" placeholder="秒">
                                    </div>
                                    <div class="col-md-3">
                                        <label for="editIoengine" class="form-label fw-semibold mb-1">I/O引擎 <span class="text-danger">*</span></label>
                                        <select class="form-select form-select-sm" id="editIoengine" required>
                                            <option value="libaio">libaio (Linux异步I/O)</option>
                                            <option value="sync">sync (同步I/O)</option>
                                            <option value="psync">psync (POSIX同步I/O)</option>
                                            <option value="pvsync">pvsync (POSIX向量同步I/O)</option>
                                            <option value="null">null (不执行实际I/O)</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="editIodepth" class="form-label fw-semibold mb-1">I/O深度</label>
                                        <input type="number" class="form-control form-control-sm" id="editIodepth" min="1" value="32" placeholder="深度">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 高级参数 -->
                        <div class="card mb-4">
                            <div class="card-header bg-light">
                                <h6 class="mb-0 text-primary"><i class="fas fa-tools me-2"></i>高级参数</h6>
                            </div>
                            <div class="card-body">
                                <div class="row g-2">
                                    <div class="col-md-3">
                                        <label for="editDirect" class="form-label fw-semibold mb-1">直接I/O</label>
                                        <select class="form-select form-select-sm" id="editDirect">
                                            <option value="1" selected>启用 (绕过系统缓存)</option>
                                            <option value="0">禁用 (使用系统缓存)</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="editTimeBased" class="form-label fw-semibold mb-1">基于时间</label>
                                        <select class="form-select form-select-sm" id="editTimeBased">
                                            <option value="1" selected>启用 (按时间运行)</option>
                                            <option value="0">禁用 (按大小运行)</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="editVerify" class="form-label fw-semibold mb-1">数据校验</label>
                                        <select class="form-select form-select-sm" id="editVerify">
                                            <option value="" selected>无校验</option>
                                            <option value="crc32">CRC32</option>
                                            <option value="md5">MD5</option>
                                            <option value="meta">元数据</option>
                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label for="editEndFsync" class="form-label fw-semibold mb-1">结束时同步</label>
                                        <select class="form-select form-select-sm" id="editEndFsync">
                                            <option value="0" selected>无</option>
                                            <option value="1">启用</option>
                                        </select>
                                    </div>
                                    <div class="col-12">
                                        <label for="editFilename" class="form-label fw-semibold mb-1">测试文件路径</label>
                                        <input type="text" class="form-control form-control-sm" id="editFilename" value="/tmp/fiotest" placeholder="文件路径">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i>取消
                    </button>
                    <button type="button" class="btn btn-primary" id="saveEditTestCaseBtn">
                        <i class="fas fa-save me-1"></i>保存修改
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/vendor/bootstrap.bundle.min.js"></script>
    <script src="/static/js/test-cases.js"></script>
</body>
</html>